<template>
  <div class="container">
    <router-link to="/TreeList" class="back-button">返回</router-link>
    <h2 class="title">当前问卷：{{ treeId }}</h2>
    <h3 class="etitle">请选择您的病症特征</h3>

    <div v-if="questionnaireData.length > 0" class="content">
      <div v-for="(item, index) in questionnaireData" :key="index" class="question-item" v-show="currentIndex === index">
  <label class="question-label">第{{ index + 1 }}题：{{ item.key }}：</label>
  <select v-model="selectedValues[item.key]" class="select-box">
    <option v-for="option in item.options" :key="option" :value="option">{{ option }}</option>
  </select>
  <br>&#10;
</div>
      <button @click="prevQuestion" class="submit-button" :disabled="currentIndex === 0">上一题</button>
      <button @click="nextQuestion" class="submit-button" :disabled="currentIndex === questionnaireData.length - 1">下一题</button>
      <br>&#10;
      <br>&#10;
      <br>&#10;
      <button @click="submitFeedback" class="submit-button">提交</button>
    </div>

    <el-dialog v-model="dialogVisible" title="反馈结果" @close="dialogVisible = false">
      <p>返回的结果：{{ feedbackResult }}</p>
      <template #footer>
        <el-button @click="dialogVisible = false">确认</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      questionnaireData: [],
      selectedValues: {},
      treeId: sessionStorage.getItem('treeid'), // 决策树 id
      dialogVisible: false,
      feedbackResult: '',
      currentIndex: 0 // 当前题目的索引
    };
  },

  created() {
//     const exmp = {persons: ["2", "4", "more"],
//           safety: ["high", "low", "med"],
//           maint: ["high", "low", "med", "vhigh"],
//           lug_boot: ["big", "med", "small"]
// };
//     this.questionnaireData = Object.entries(exmp).map(([key, options]) => ({
//           key,
//           options
//         }));
    const dataTree = sessionStorage.getItem('treeid');
    this.$axios
      .get(`http://localhost/api/tree/getAttribute?treeId=${dataTree}`, {
        headers: {
          token: sessionStorage.getItem('token')
        }
      })
      .then((response) => {
        console.log(response.data);
        if (response.data.code == 200) {
          this.questionnaireData = Object.entries(response.data.data).map(([key, options]) => ({
          key,
          options
        }));
          //this.questionnaireData = response.data.data;
          console.log('问卷获取成功');
        } else {
          this.$message.error('出错了，请重试！');
        }
      })
      .catch((error) => {
        console.error('失败', error);
        this.$message.error('网络错误，请重试！');
      });
  },

  computed: {
    isLastQuestion() {
      // 判断是否是最后一个问题
      return this.questionnaireData.length > 0 && this.questionnaireData.length === Object.keys(this.selectedValues).length;
    }
  },

  methods: {
    async submitFeedback() {
      const requestBody = {};
      for (const key in this.selectedValues) {
        requestBody[key] = this.selectedValues[key];
      }

      try {
        const response = await this.$axios.post(`http://localhost/api/tree/getFeedback?treeId=${this.treeId}`, requestBody, {
          headers: {
            token: sessionStorage.getItem('token')
          }
        });
        if (response.data.code === 200) {
          console.log('返回的结果：', response.data.data);

          this.feedbackResult = response.data.data;
          this.dialogVisible = true;
        } else {
          console.error('请求失败:', response.data.msg);
        }
      } catch (error) {
        console.error('请求失败:', error);
      }
    },
    prevQuestion() {
      if (this.currentIndex > 0) {
        this.currentIndex--;
      }
    },
    nextQuestion() {
      if (this.currentIndex < this.questionnaireData.length - 1) {
        this.currentIndex++;
      }
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  flex-direction: column;
  height: auto;
  padding: 20px;
}

.back-button {
  background-color: #3a5344;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 12px 24px;
  font-size: 14px;
  cursor: pointer;
  margin-bottom: 20px;
  text-decoration: none;
  transition: background-color 0.3s ease-in-out;
}

.back-button:hover {
  background-color: #83c19d;
}

.title {
  font-size: 24px;
  margin-bottom: 20px;
}

.content {
  margin-bottom: 50px;
}

.question-item {
  margin-bottom: 50px;
  margin-top: 30px;
}

.question-label {
  margin-right: 10px;
}

.select-box {
  padding: 8px;
  border-radius: 5px;
  border: 1px solid #ccc;
  font-size: 16px;
}

.submit-button {
  background-color: #3a5344;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 12px 24px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
  margin-right: 10px;
}

.submit-button:hover {
  background-color: #83c19d;
}

.submit-button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
</style>
